import React, { Component, Fragment } from 'react';
import { CSSTransition, TransitionGroup } from 'react-transition-group';
import './style.css';

class Transition extends Component {
	constructor(props) {
	    super(props);
			this.state = {
				show: true,
				list: []
			}
			this.handleToggle = this.handleToggle.bind(this);
			this.handleAddItem = this.handleAddItem.bind(this);
	}
	
	handleToggle() {
		this.setState({
			show: this.state.show ? false : true
		})
	}
	
	handleAddItem() {
		this.setState((preState) => {
			return {
				list: [...preState.list, 'item']
			}
		})
	}
	
	render() {
		return (
			<Fragment>
				{this.state.show ? <span>show</span> : <span>hide</span>}
				<div className={this.state.show ? 'show' : 'hide'}>hello</div>
				<div className={this.state.show ? 'animate-show' : 'animate-hide'}>animate</div>
				<CSSTransition
					in={this.state.show}
					timeout={1000}
					classNames='fade'
					unmountOnExit
					onEntered={(el)=> {
						el.style.color='blue';
					}}
					appear={true}
				>
					<div>CSSTransition</div>
				</CSSTransition>
				<TransitionGroup>
					{ this.state.list.map((item, index) => {
							return (
								<CSSTransition
									in={this.state.show}
									timeout={1000}
									classNames='fade'
									unmountOnExit
									onEntered={(el)=> {
										el.style.color='blue';
									}}
									appear={true}
									key={index}
								>
									<div>{item}</div>
								</CSSTransition>
							)
						}) 
					}
				</TransitionGroup>
				<button onClick={this.handleToggle}>toggle</button>
				<button onClick={this.handleAddItem}>addItem</button>
			</Fragment>
		)
	}
}

export default Transition;